昨天微人簡單的用 request 套件抓取 API 資料，今天來聊一下，request 套件的原生始祖，JavaScript 裡的 fetch 方法。

fetch 怎麼用？

既然昨天用了 request 的範例，今天也不免俗的在套用來看看效果如何囉！
首先
我們在昨天 api 這個資料夾裡面新增一個先在生成一個 usefetch.js 檔並且用 vscode 開啟，這就是我們今天要來實作的檔案。
同樣引入 API 的網站 reqres 裡測試用的 API 網址，以下微人先宣告了引入 fetch 做使用。

fetch 方法使用

const fetch = require("node-fetch");

fetch("https://reqres.in/api/users/2")
.then(function(response) { return response.json(); })
.then(function(data) {
  console.log(data);
})

• 輸入要抓出的資料位置所提供開放的 API網址
• 用 then 方法來接收 fetch 的回傳值，並傳入回呼函式，以 .json（）轉成 json 格式
• 再用 then 方法等待上一部動作，接收後並用 data 這個值來做呈現，
• 最後用 console.log(data) 印出結果

回到終端機來看結過，記得要cd到對應的資料夾~/Desktop/projects/api裡唷！
在終端機下指令node usefetch.js

回傳值

 ~/Desktop/projects/api  node usefetch.js
{
  data: {
    id: 2,
    email: 'janet.weaver@reqres.in',
    first_name: 'Janet',
    last_name: 'Weaver',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg'
  },
  ad: {
    company: 'StatusCode Weekly',
    url: 'http://statuscode.org/',
    text: 'A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things.'
  }
}

是不是很神奇？我們也是可以拿回來同樣一包東西，雖然寫法上是稍微一點點不一樣，但其實抓到資訊的方式是不變的，只有用不同的渲染方式呈現出來，可說是各有優缺囉。
今天就先了到這囉，明天見，掰餔。